<template>
  <div class="frame">
    <div class="box">
      <h1>{{ shop.name }}</h1>
      <van-rate
        class="xing"
        v-model="shop.score"
        :size="25"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
        allow-half
      />
      <h2 class="Offer"><span></span> 优惠信息 <span></span></h2>
      <ul>
        <li v-for="item in shop.supports" :key="item">
          <span class="less">减</span>{{ item }}
        </li>
      </ul>
      <h2 class="Offer"><span></span> 商家公告 <span></span></h2>
      <p class="Notice">
        {{ shop.bulletin }}
      </p>
      <i @click="closeFrame" class="iconfont icon-guanbi"></i>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/tool/tool";
export default {
  created() {
    this.shop = get("shop");
  },
  data() {
    return {
      shop: {},
    };
  },
  methods: {
    closeFrame() {
      this.$emit("closeFrame");
    },
  },
};
</script>

<style lang="less" scoped>
.frame {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  color: #fff;
  .box {
    text-align: center;
    width: 300px;
    margin: 0 auto;
  }
  h1 {
    margin-top: 60px;
  }
  .xing {
    margin-top: 20px;
  }
  .Offer {
    margin-top: 30px;
    span {
      border-bottom: 1px solid #fff;
      width: 80px;
      display: inline-block;
      margin-bottom: 5px;
    }
  }
  li {
    text-align: left;
    margin-left: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    .less {
      background-color: #fff;
      margin-right: 10px;
      color: #000;
      font-size: 12px;
    }
  }
  .Notice {
    word-wrap: break-word;
    margin-top: 20px;
  }
  i {
    font-size: 30px;
    margin-top: 100px;
    display: block;
  }
}
</style>